<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/css/bootstrap.min.css"
          integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    <title>WEBLOG-分布式日志查看工具</title>
</head>
<style>
    body {
        background-color: black;
    }

    .logo{
        color: #a89131;
        font-size: 18px;
        float: left;
        width: 500px;
        line-height: 21px;
        text-align: center;
        font-family:"微软雅黑";
    }

    .search{
        margin: 7px 2px 0 0 ;
        height: 20px;
        background:rgba(0, 0, 0, 0);

    }

    .textarea {
        font-size: 10px;
        color: #16bd10;
        resize: none;
        width: 100%;
        height: 800px;
        background-color: #2a2828;
        border: 0px solid #2a2828;
        overflow: auto;
    }

    .box1 {
        float: left;
        width: 20%
    }

    .box2 {
        float: left;
        width: 80%
    }

    .menu {
        width: 80%;
        height: 30px;
        color: azure;
        font-size: 13px;
        font-family: "微软雅黑";
        background: #2a2828;
        margin-top: 10px;
        border-top: 2px solid red;
    }

    .checkField {
        color: azure;
    }

</style>

<body class="body">
<form onsubmit="return false">


    <div id="" class="container-fluid">
        <div class="row">
            <div class="col-2">
                <div class="row" style="margin-top: 5px;">

                    <span class="logo"><b>WEBLOG</b></span>

                        <form class="form-inline ">
                            <input class="form-control mr-sm-2 search" type="search" placeholder="Filter..." aria-label="Filter">
                        </form>

                </div>
                <div class="row" id="menuId">
                    <div class='box1 menu'>暂无菜单信息,请等待客户端上线！</div>
                    <div class='box2 menu' style='width: 20%;'><input type='checkbox'/></div>
                </div>
            </div>

            <div class="col-10">
                <div style="margin: 3px 0px 3px 0;">
                    <input type="button" class="btn btn-secondary btn-sm"
                           onclick="javascript:document.getElementById('responseText').value=''" value="清空">

                    <div class="btn-group  btn-group-toggle btn-group-sm" data-toggle="buttons">
                        <label class="btn btn-secondary active">
                            <input type="radio" name="options" id="option2" onclick="javascript:flagScroll=true"
                                   checked>
                            滚动
                        </label>
                        <label class="btn btn-secondary">
                            <input type="radio" name="options" id="option1" onclick="javascript:flagScroll=false">
                            定位
                        </label>
                    </div>

                    <div class="btn-group  btn-group-toggle btn-group-sm" data-toggle="buttons">
                        <label class="btn btn-secondary active">
                            <input type="radio" name="options" id="option3" onclick="updateFontSize('+')" checked>
                            +
                        </label>
                        <label class="btn btn-secondary">
                            <input type="radio" name="options" id="option4" onclick="updateFontSize('-')">
                            -
                        </label>
                    </div>

                    <input type='checkbox' id="s_ip" onclick='menuChange()' checked><span
                        class="checkField">IP</span></input>

                    <input type='checkbox' id="s_na" onclick='menuChange()' checked><span
                        class="checkField">文件名</span></input>
                    <input type="color" value="#16bd10" onchange="updateColor(this.value)"/>
                    <span id="state" style="margin-left:60%;"></span>
                </div>
                <div class="row">
                    <textarea id="responseText" class="textarea"  disabled></textarea>
                </div>
            </div>
        </div>
    </div>

</form>

<div>




</div>

</body>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"
        integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
        crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
        integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
        crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/js/bootstrap.min.js"
        integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
        crossorigin="anonymous"></script>
<script type="text/javascript">

    let url = "ws://" + window.location.host + "/ws";
    let socket;
    let flagScroll = true;
    let fontSize = 15;
    let menus = [];
    let showIp = true;
    let showFileName = true;
    let showContent = true;

    if (window.WebSocket) {

        socket = new WebSocket(url);

        socket.onmessage = function (event) {
            let result = JSON.parse(event.data);
            //渲染菜单
            if (result.type == "menu") {
                let menus = result.obj;
                let source = document.getElementById("menuId");
                if (menus.length == 0) {
                    return;
                }
                source.innerHTML = "";
                for (let i = 0; i < menus.length; i++) {
                    let clones = "<div class='box1 menu'>" + menus[i] + "</div><div class='box2 menu' style='width: 20%;'><input onclick='menuChange()' name='menuCheck' value='" + menus[i] + "' type='checkbox' checked/></div>";
                    source.innerHTML = source.innerHTML + clones;
                }
                return;
            }
            //渲染日志
            if (result.type == "logData") {
                let ta = document.getElementById("responseText");
                ta.value = ta.value + "\n" + result.obj;
                if (flagScroll) {
                    document.getElementById('responseText').scrollTop = document.getElementById('responseText').scrollHeight;
                }
                return;
            }
            console.warn("未知消息类型!");
        }

        socket.onopen = function (event) {
            updateState("连接成功", true);
        }

        socket.onclose = function (event) {
            updateState("连接关闭", false);
        }
    } else {
        updateState("您的浏览器不支持WebSocket,请更换浏览器！", false);
    }

    /**
     * 修改个性化
     * @param msg
     * @param color
     */
    function updateServerConfig() {
        if (!window.WebSocket) {
            return;
        }
        if (socket.readyState == WebSocket.OPEN) {
            let source = {"source": menus, "showIp": showIp, "showFileName": showFileName, "showContent": true};
            socket.send(JSON.stringify(source));
        } else {
            updateState("服务器连接关闭,无法修改配置!", false);
        }
    }

    /**
     * 修改状态
     * @param msg
     * @param color
     */
    function updateState(msg, isOk) {
        document.getElementById("state").innerHTML = msg;
        if (isOk) {
            document.getElementById("state").className = "badge badge-pill badge-success";
        } else {
            document.getElementById("state").className = "badge badge-pill badge-danger";
        }
    }

    /**
     * 修改字体
     * @param
     */
    function updateFontSize(s) {
        let ta = document.getElementById("responseText");
        if (s == "+") {
            fontSize++;
            ta.style.fontSize = fontSize + 'px';
        } else {
            fontSize--;
            ta.style.fontSize = fontSize + 'px';
        }
    }

    /**
     * 渲染菜单
     */
    function menuChange() {
        let obj = document.getElementsByName("menuCheck");
        let s_ip = document.getElementById("s_ip");
        let s_na = document.getElementById("s_na");
        //刷新菜单
        menus = [];
        for (let i in obj) {
            if (obj[i].checked) {
                menus.push(obj[i].value);
            }
        }
        //刷新列
        if (s_ip.checked) {
            showIp = true;
        } else {
            showIp = false;
        }

        if (s_na.checked) {
            showFileName = true;
        } else {
            showFileName = false;
        }

        /*let s_cn = document.getElementById("s_cn");
        if (s_cn.checked) {
            showContent = true;
        } else {
            showContent = false;
        }*/
        updateServerConfig();
    }

    //修改输出颜色
    function updateColor(value){
        document.getElementById("responseText").style.color=value;
    }

    /**
     * 限制按键
     */
    document.addEventListener('keydown', function (e) {
        if (e.keyCode == 83 && (navigator.platform.match("Mac") ? e.metaKey : e.ctrlKey)) {
            e.preventDefault();
            console.info("限制保存操作.")
        }
    });
</script>
</html>